<template>
    <p style="text-align: center; margin: 0 0 20px">
      作业完成表
    </p>
    <div style="text-align: center">
      <el-transfer
        v-model="leftValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['未完成作业', '已完成作业']"
        :button-texts="['完成', '未完成']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #left-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
      </el-transfer>
      <p style="text-align: center; margin: 50px 0 20px">
            记得按时完成作业哦
      </p>
      <!-- <div style="text-align: center">
        <el-transfer
          v-model="rightValue"
          style="text-align: left; display: inline-block"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['Source', 'Target']"
          :button-texts="['To left', 'To right']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}',
          }"
          :data="data"
          @change="handleChange"
        >
          <template #default="{ option }">
            <span>{{ option.key }} - {{ option.label }}</span>
          </template>
          <template #left-footer>
            <el-button class="transfer-footer" size="small">Operation</el-button>
          </template>
          <template #right-footer>
            <el-button class="transfer-footer" size="small">Operation</el-button>
          </template>
        </el-transfer>
      </div> -->
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { VNode, VNodeProps } from 'vue'
  
  interface Option {
    key: number
    label: string
    disabled: boolean
  }
  
  const generateData = (): Option[] => {
    const data: Option[] = []
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      })
    }
    return data
  }
  
  const data = ref(generateData())
  const rightValue = ref([1])
  const leftValue = ref([1])
  
  const renderFunc = (
    h: (type: string, props: VNodeProps | null, children?: string) => VNode,
    option: Option
  ) => {
    return h('span', null, option.label)
  }
  const handleChange = (
    value: number[] | string[],
    direction: 'left' | 'right',
    movedKeys: string[] | number[]
  ) => {
    console.log(value, direction, movedKeys)
  }
  </script>
  
  <style>
  .transfer-footer {
    margin-left: 15px;
    padding: 6px 5px;
  }
  </style>